<template>
	<view>
		<!-- 记账列表 -->
		<view class="horizontal_view p-30 uni-bg-color-fff font-32 bold">
			总收入:{{total}}元
		</view>
		<view class="account_list p-20">
			<view class="account_item p-20 radius-10 uni-bg-color-fff mb-20" v-for="(item,index) in orderList"
				:key="index">
				<view class="horizontal_view align_item_center justify_between u-border-bottom pb-20 mb-20">
					<view class="bold font-30">
						{{item.diningName}}
					</view>
					<view class="font-28 uni-text-color-666">
						{{$u.timeFormat(item.createDate, 'yyyy-mm-dd hh:MM')}}
					</view>
				</view>

				<view class="product_list relative" :style="{'height':orderIndex === index?'auto':'120rpx'}">
					<view class="dishes_item horizontal_view mb-20" v-for="(cell,cIndex) in item.list" :key="cell.id">
						<view class="dishes_image uni-bg-color-grey radius-10">

						</view>
						<view class="dishes_content px-20 flex-1">
							<view class="name bold">
								{{cell.name}}
							</view>
							<view class="horizontal_view justify_between align_item_baseline">
								<view class="horizontal_view align_item_baseline mt-10">
									<view class="">
										<PriceTag :amount="cell.price" :after-font-size="14" :amount-color="'#d81e06'">
										</PriceTag>
									</view>
									<view class="unit uni-theem-text-color">
										/{{cell.unit}}
									</view>
								</view>
								<view class="number_content">
									x{{cell.count}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="more_btn uni-text-color-666 font-28 horizontal_view align_item_center justify_center"
					@click="onClickMore(item,index)">
					查看更多
					<u-icon name="arrow-down" color="#666"></u-icon>
				</view>
				<view class="horizontal_view pt-20 u-border-top font-36 bold">
					合计:{{item.total}}元
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		computed: mapState(['orderList']),
		data() {
			return {
				total: 0,
				orderIndex: -1,
			}
		},
		onShow() {
			this.total = 0;

			let value = uni.getStorageSync("orderList");
			if (value) {
				this.getOrderData(JSON.parse(value));
				for (var i = 0; i < this.orderList.length; i++) {
					this.total += Number(this.orderList[i].total)
				}
			}

		},
		methods: {
			...mapMutations(["getOrderData"]),
			onClickMore(item, index) {
				this.orderIndex = this.orderIndex === -1 ? index : -1;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dishes_item {
		.dishes_image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.product_list {
		overflow: hidden;
	}

	.more_btn {
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
	}
</style>